import QtQuick 2.14
import QtQuick.Window 2.14
import QtQuick.Controls 2.14
import QtQuick.Layouts 1.14
import QtGraphicalEffects 1.14

Window {
    id: mainWindow
    width: 1200
    height: 800
    visible: true
    title: "主界面"
    flags: Qt.Window | Qt.FramelessWindowHint
    color: "transparent"

    // 定义菜单项数据
    property var menuItems: [
        {text: "程序", icon: "program.svg", selected: false},
        {text: "监控", icon: "monitor.svg", selected: false},
        {text: "运行", icon: "run.svg", selected: false},
        {text: "功能", icon: "function.svg", selected: false},
        {text: "设置", icon: "setting.svg", selected: false},
        {text: "历史", icon: "history.svg", selected: false},
        {text: "用户", icon: "user.svg", selected: false}
    ]

    // 当前选中的页面索引
    property int currentPageIndex: 0

    // 组件创建完成后设置初始选中状态
    Component.onCompleted: {
        menuItems[0].selected = true
    }

    // 主窗口背景
    Rectangle {
        id: windowBorder
        anchors.fill: parent
        color: "white"
        radius: 0

        // 标题栏
        Rectangle {
            id: titleBar
            height: 35
            color: "#0088ee"
            radius: 0
            anchors {
                top: parent.top
                left: parent.left
                right: parent.right
            }

            // 标题
            Text {
                text: "欢迎"
                color: "white"
                font.pixelSize: 14
                anchors.left: parent.left
                anchors.leftMargin: 20
                anchors.verticalCenter: parent.verticalCenter
            }

            // 拖动区域
            MouseArea {
                anchors.left: parent.left
                anchors.right: windowControls.left
                anchors.top: parent.top
                anchors.bottom: parent.bottom
                property point clickPos: "0,0"
                
                onPressed: {
                    clickPos = Qt.point(mouse.x, mouse.y)
                }
                
                onPositionChanged: {
                    if (mainWindow.visibility !== Window.Maximized) {
                        var delta = Qt.point(mouse.x - clickPos.x, mouse.y - clickPos.y)
                        mainWindow.x += delta.x
                        mainWindow.y += delta.y
                    }
                }
                
                onDoubleClicked: {
                    if (mainWindow.visibility === Window.Maximized) {
                        mainWindow.showNormal()
                    } else {
                        mainWindow.showMaximized()
                    }
                }
            }

            // 窗口控制按钮
            Row {
                id: windowControls
                anchors.right: parent.right
                anchors.verticalCenter: parent.verticalCenter
                spacing: 0
                
                // 最小化按钮
                Button {
                    id: minimizeButton
                    width: 45
                    height: 35
                    flat: true
                    
                    contentItem: Text {
                        text: "─"
                        color: parent.hovered ? "#e0e0e0" : "white"
                        font.pixelSize: 14
                        horizontalAlignment: Text.AlignHCenter
                        verticalAlignment: Text.AlignVCenter
                    }
                    
                    background: Rectangle {
                        color: parent.hovered ? "#1a7ed3" : "transparent"
                    }
                    
                    onClicked: {
                        mainWindow.showMinimized()
                    }

                    ToolTip {
                        text: "最小化"
                        visible: parent.hovered
                        delay: 500
                    }
                }

                // 最大化按钮
                Button {
                    id: maximizeButton
                    width: 45
                    height: 35
                    flat: true
                    property bool isMaximized: mainWindow.visibility === Window.Maximized
                    
                    contentItem: Text {
                        text: maximizeButton.isMaximized ? "❐" : "□"
                        color: parent.hovered ? "#e0e0e0" : "white"
                        font.pixelSize: 14
                        horizontalAlignment: Text.AlignHCenter
                        verticalAlignment: Text.AlignVCenter
                    }
                    
                    background: Rectangle {
                        color: parent.hovered ? "#1a7ed3" : "transparent"
                    }
                    
                    onClicked: {
                        if (mainWindow.visibility === Window.Maximized) {
                            mainWindow.showNormal()
                        } else {
                            mainWindow.showMaximized()
                        }
                    }

                    ToolTip {
                        text: maximizeButton.isMaximized ? "还原" : "最大化"
                        visible: parent.hovered
                        delay: 500
                    }
                }

                // 关闭按钮
                Button {
                    id: closeButton
                    width: 45
                    height: 35
                    flat: true
                    
                    contentItem: Text {
                        text: "×"
                        color: parent.hovered ? "white" : "white"
                        font.pixelSize: 16
                        horizontalAlignment: Text.AlignHCenter
                        verticalAlignment: Text.AlignVCenter
                    }
                    
                    background: Rectangle {
                        color: parent.hovered ? "#e81123" : "transparent"
                    }
                    
                    onClicked: {
                        mainWindow.close()
                    }

                    ToolTip {
                        text: "关闭"
                        visible: parent.hovered
                        delay: 500
                    }
                }
            }
        }

        // 左侧菜单栏
        Rectangle {
            id: leftMenu
            width: 80
            color: "#f0f0f0"
            anchors {
                left: parent.left
                top: titleBar.bottom
                bottom: parent.bottom
            }

            ColumnLayout {
                anchors.top: parent.top
                anchors.topMargin: 0
                width: parent.width
                spacing: 0

                // 菜单按钮
                Repeater {
                    model: menuItems
                    delegate: Button {
                        id: menuButton
                        Layout.preferredWidth: 80
                        Layout.preferredHeight: 80
                        Layout.alignment: Qt.AlignHCenter
                        property int buttonIndex: index
                        property bool isSelected: menuItems[buttonIndex].selected
                        
                        contentItem: Column {
                            spacing: 8
                            anchors.centerIn: parent
                            Image {
                                width: 32
                                height: 32
                                source: "qrc:/images/" + modelData.icon
                                anchors.horizontalCenter: parent.horizontalCenter
                                sourceSize: Qt.size(32, 32)
                                opacity: menuButton.isSelected ? 1.0 : 0.7
                                layer.enabled: true
                                layer.effect: ColorOverlay {
                                    color: menuButton.isSelected ? "#0088ee" : "#666666"
                                }
                            }
                            Text {
                                text: modelData.text
                                color: menuButton.isSelected ? "#0088ee" : "#666666"
                                font.pixelSize: 12
                                font.bold: menuButton.isSelected
                                anchors.horizontalCenter: parent.horizontalCenter
                            }
                        }
                        
                        background: Rectangle {
                            color: menuButton.isSelected ? "#ffffff" : (menuButton.hovered ? "#e5e5e5" : "transparent")

                            // 左侧选中指示器
                            Rectangle {
                                width: 3
                                height: parent.height
                                color: "#0088ee"
                                visible: menuButton.isSelected
                                anchors.left: parent.left
                            }

                            // 底部分隔线
                            Rectangle {
                                width: parent.width
                                height: 1
                                color: "#e0e0e0"
                                anchors.bottom: parent.bottom
                                visible: !menuButton.isSelected
                            }
                        }

                        onClicked: {
                            // 更新选中状态
                            for (var i = 0; i < menuItems.length; i++) {
                                menuItems[i].selected = (i === index)
                            }
                            currentPageIndex = index
                        }
                    }
                }
            }
        }

        // 主要内容区域
        Rectangle {
            id: contentArea
            color: "#ffffff"
            anchors {
                left: leftMenu.right
                right: parent.right
                top: titleBar.bottom
                bottom: parent.bottom
            }

            // 内容页面堆栈
            StackLayout {
                anchors.fill: parent
                currentIndex: currentPageIndex

                // 程序页面
                Rectangle {
                    color: "white"

                    // 三个卡片区域
                    Row {
                        anchors.fill: parent
                        spacing: 1

                        // 程序名称卡片
                        Rectangle {
                            width: parent.width / 3
                            height: parent.height
                            color: "white"

                            Rectangle {
                                width: parent.width - 10
                                height: 35
                                color: "#0088ee"
                                anchors.top: parent.top
                                anchors.horizontalCenter: parent.horizontalCenter
                                anchors.margins: 5

                                Text {
                                    text: "程序名称"
                                    color: "white"
                                    font.pixelSize: 14
                                    anchors.centerIn: parent
                                }
                            }
                        }

                        // 步骤列表卡片
                        Rectangle {
                            width: parent.width / 3
                            height: parent.height
                            color: "white"

                            Rectangle {
                                width: parent.width - 10
                                height: 35
                                color: "#0088ee"
                                anchors.top: parent.top
                                anchors.horizontalCenter: parent.horizontalCenter
                                anchors.margins: 5

                                Text {
                                    text: "步骤列表"
                                    color: "white"
                                    font.pixelSize: 14
                                    anchors.centerIn: parent
                                }
                            }

                            // 表格头部
                            Rectangle {
                                anchors.top: parent.top
                                anchors.topMargin: 45
                                anchors.horizontalCenter: parent.horizontalCenter
                                width: parent.width - 10
                                height: 30
                                color: "#f5f5f5"

                                Row {
                                    anchors.fill: parent
                                    spacing: 1

                                    Repeater {
                                        model: ["序号", "运动名称", "时间(秒)", "优先级", "吹风次数"]
                                        delegate: Rectangle {
                                            width: parent.width / 5
                                            height: parent.height
                                            color: "#f5f5f5"
                                            
                                            Text {
                                                text: modelData
                                                anchors.centerIn: parent
                                                font.pixelSize: 12
                                                color: "#333333"
                                            }
                                        }
                                    }
                                }
                            }
                        }

                        // 步骤详情卡片
                        Rectangle {
                            width: parent.width / 3
                            height: parent.height
                            color: "white"

                            Rectangle {
                                width: parent.width - 10
                                height: 35
                                color: "#0088ee"
                                anchors.top: parent.top
                                anchors.horizontalCenter: parent.horizontalCenter
                                anchors.margins: 5

                                Text {
                                    text: "步骤详情"
                                    color: "white"
                                    font.pixelSize: 14
                                    anchors.centerIn: parent
                                }
                            }

                            // 详情表单
                            Column {
                                anchors.top: parent.top
                                anchors.topMargin: 50
                                anchors.horizontalCenter: parent.horizontalCenter
                                width: parent.width - 20
                                spacing: 15

                                Column {
                                    width: parent.width
                                    spacing: 5
                                    Text {
                                        text: "程序名称:"
                                        font.pixelSize: 12
                                        color: "#333333"
                                    }
                                    TextField {
                                        width: parent.width
                                        height: 30
                                        font.pixelSize: 12
                                        background: Rectangle {
                                            border.color: "#dddddd"
                                            radius: 2
                                        }
                                    }
                                }

                                Column {
                                    width: parent.width
                                    spacing: 5
                                    Text {
                                        text: "步骤序号:"
                                        font.pixelSize: 12
                                        color: "#333333"
                                    }
                                    TextField {
                                        width: parent.width
                                        height: 30
                                        font.pixelSize: 12
                                        background: Rectangle {
                                            border.color: "#dddddd"
                                            radius: 2
                                        }
                                    }
                                }

                                Column {
                                    width: parent.width
                                    spacing: 5
                                    Text {
                                        text: "运动名称:"
                                        font.pixelSize: 12
                                        color: "#333333"
                                    }
                                    ComboBox {
                                        width: parent.width
                                        height: 30
                                        font.pixelSize: 12
                                        background: Rectangle {
                                            border.color: "#dddddd"
                                            radius: 2
                                        }
                                    }
                                }

                                Column {
                                    width: parent.width
                                    spacing: 5
                                    Text {
                                        text: "时间(秒):"
                                        font.pixelSize: 12
                                        color: "#333333"
                                    }
                                    TextField {
                                        width: parent.width
                                        height: 30
                                        font.pixelSize: 12
                                        background: Rectangle {
                                            border.color: "#dddddd"
                                            radius: 2
                                        }
                                    }
                                }

                                Column {
                                    width: parent.width
                                    spacing: 5
                                    Text {
                                        text: "优先级:"
                                        font.pixelSize: 12
                                        color: "#333333"
                                    }
                                    ComboBox {
                                        width: parent.width
                                        height: 30
                                        font.pixelSize: 12
                                        background: Rectangle {
                                            border.color: "#dddddd"
                                            radius: 2
                                        }
                                    }
                                }

                                Column {
                                    width: parent.width
                                    spacing: 5
                                    Text {
                                        text: "吹风次数:"
                                        font.pixelSize: 12
                                        color: "#333333"
                                    }
                                    TextField {
                                        width: parent.width
                                        height: 30
                                        font.pixelSize: 12
                                        background: Rectangle {
                                            border.color: "#dddddd"
                                            radius: 2
                                        }
                                    }
                                }

                                Column {
                                    width: parent.width
                                    spacing: 5
                                    Text {
                                        text: "是否吹风:"
                                        font.pixelSize: 12
                                        color: "#333333"
                                    }
                                    ComboBox {
                                        width: parent.width
                                        height: 30
                                        font.pixelSize: 12
                                        background: Rectangle {
                                            border.color: "#dddddd"
                                            radius: 2
                                        }
                                    }
                                }

                                Button {
                                    width: parent.width
                                    height: 35
                                    text: "保存修改"
                                    font.pixelSize: 14
                                    
                                    contentItem: Text {
                                        text: parent.text
                                        color: "white"
                                        horizontalAlignment: Text.AlignHCenter
                                        verticalAlignment: Text.AlignVCenter
                                        font.pixelSize: parent.font.pixelSize
                                    }
                                    
                                    background: Rectangle {
                                        color: parent.pressed ? "#0077cc" : "#0088ee"
                                        radius: 2
                                    }
                                }
                            }
                        }
                    }
                }

                // 监控页面
                Rectangle {
                    color: "white"
                    Text {
                        anchors.centerIn: parent
                        text: "监控页面"
                        font.pixelSize: 24
                        color: "#333333"
                    }
                }

                // 运行页面
                Rectangle {
                    color: "white"
                    Text {
                        anchors.centerIn: parent
                        text: "运行页面"
                        font.pixelSize: 24
                        color: "#333333"
                    }
                }

                // 功能页面
                Rectangle {
                    color: "white"
                    Text {
                        anchors.centerIn: parent
                        text: "功能页面"
                        font.pixelSize: 24
                        color: "#333333"
                    }
                }

                // 设置页面
                Rectangle {
                    color: "white"
                    Text {
                        anchors.centerIn: parent
                        text: "设置页面"
                        font.pixelSize: 24
                        color: "#333333"
                    }
                }

                // 历史页面
                Rectangle {
                    color: "white"
                    Text {
                        anchors.centerIn: parent
                        text: "历史页面"
                        font.pixelSize: 24
                        color: "#333333"
                    }
                }

                // 用户页面
                Rectangle {
                    color: "white"
                    Text {
                        anchors.centerIn: parent
                        text: "用户页面"
                        font.pixelSize: 24
                        color: "#333333"
                    }
                }
            }
        }
    }
} 